<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>4.模块延迟解析与严格模式</title>
</head>

<body>
  <!-- 模块总是会在所有 html 解析后才执行，下面的模块代码可以看到后加载的 button 按钮元素。 -->
  <script type="module">
    // site = 'houdunren.com'; 模块中自动使用严格模式，非严格模式下site会被定义到window中，严格模式下会报错4.模块延迟解析与严格模式.html:15 Uncaught ReferenceError: site is not defined
    console.log("module", document.querySelector("button")); //Button  这个后加载，html解析后才执行所谓
    // 引入到模块也是一样的
    import { } from './moudules.js';
    // 模块中自动使用严格模式，打印的是undefined
    console.log(this); //undefined
  </script>
  <script>
    console.log(document.querySelector("button")); //undefined
    console.log(this); // window
  </script>
  <button>后盾人</button>
</body>

</html>